import { useEffect } from "react";
import styles from "./map.css";
import AMapLoader from "@amap/amap-jsapi-loader";

export default function MapContainer(props) {
  let map = null;
  const circleStyle = {
    position: "absolute",
    left: "35%",
    top: "25%",
    width: "100px",
    height: "100px",
    borderRadius: "50%",
    backgroundColor: "#7d70e8",
    textAlign: "center",
    lineHeight: "100px",
    color: "white",
    fontSize: "20px",
    fontWeight: "600",
    animation: "wave 1.5s infinite",
  };

  useEffect(() => {
    AMapLoader.load({
      key: "eb8d1bf1d62b964cb8f8c091dc42ca1b", // 申请好的Web端开发者Key，首次调用 load 时必填
      version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
      plugins: [], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
    })
      .then((AMap) => {
        map = new AMap.Map("container", {
          // 设置地图容器id
          viewMode: "3D", // 是否为3D地图模式
          zoom: 18, // 初始化地图级别
          center: [121.227132, 31.245570], // 初始化地图中心点位置
          mapStyle: 'amap://styles/whitesmoke',
        });
      })
      .catch((e) => {
        console.log(e);
      });

    return () => {
      map?.destroy();
    };
  }, []);

  return (
    <>
    <div
      id="container"
      className={styles.container}
      style={{ height: "560px",marginRight:"20px" }}
    ></div>
    <div style={circleStyle}>{props.text}</div>
    </>
  );
}
